<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 学院列表
 * @type {*[]}
 */
let collageOptions = []

/**
 * 房间列表
 * @type {*[]}
 */
let roomOptions = []

/**
 * 订单班管理员数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {orderClassAdminRoomNo: string, orderClassAdminRoomName: string, orderClassAdminPhone: string, orderClassAdminCreateTime: string, orderClassAdminEmail: string, orderClassAdminCreateMan: string, orderClassAdminCollageName: string, orderClassAdminSex: string, orderClassAdminCountNumber: string, orderClassAdminNo: string, orderClassAdminUpdateMan: string, orderClassAdminCollageNo: string, orderClassAdminAge: number, orderClassAdminUpdateTime: string, orderClassAdminName: string}, pageSize: number, tableData: *[], orderClassAdminName: string, pageNum: number}>}
 */
const orderClassAdminData = reactive({
    orderClassAdminName: '',
    tableData: [],
    total: 0,
    pageSize: 4,
    pageNum: 1,
    formVisible: false, // 是否显示弹窗
    form: {
        orderClassAdminNo: '',
        orderClassAdminName: '',
        orderClassAdminAge: 0,
        orderClassAdminSex: '',
        orderClassAdminCollageNo: '',
        orderClassAdminCollageName: '',
        orderClassAdminRoomNo: '',
        orderClassAdminRoomName: '',
        orderClassAdminPhone: '',
        orderClassAdminEmail: '',
        orderClassAdminCreateMan: '',
        orderClassAdminCreateTime: '',
        orderClassAdminUpdateMan: '',
        orderClassAdminUpdateTime: '',
        orderClassAdminCountNumber: '',
    }
})

/**
 * 加载订单班管理员
 */
const loadOrderClassAdmin = () => {
    request.get(`/api/order-class-admin/find-order-class-admin-page`, {
        params: {
            pageNum: orderClassAdminData.pageNum,
            pageSize: orderClassAdminData.pageSize,
            orderClassAdminName: orderClassAdminData.orderClassAdminName
        }
    }).then(res => {
        orderClassAdminData.tableData = res.data?.list || []
        orderClassAdminData.total = res.data?.list.map(item => item.orderClassAdminCountNumber)[0] || 0;
    })
}
// 调用订单班管理员加载方法，获取后台数据
loadOrderClassAdmin()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadOrderClassAdmin()
}

/**
 * 重置
 */
const reset = () => {
    orderClassAdminData.orderClassAdminName = ''
    // 重置时，重新加载数据即可
    loadOrderClassAdmin()
}

/**
 * 删除订单班管理员
 *
 * @param orderClassAdminNo 工号
 */
const deleteOrderClassAdmin = (orderClassAdminNo) => {
    ElMessageBox.confirm("删除数据后无法恢复，您确认删除此条数据？", "删除确认", {type: 'warning'}).then(() => {
        if (account.accountRoleName === 'visitor-admin') {
            ElMessage.info("游客-管理员仅可以查看信息")
        } else {
            request.delete(`/api/order-class-admin/delete-order-class-admin/${orderClassAdminNo}`).then(res => {
                if (res.code === "200") {
                    // 重新获取数据
                    loadOrderClassAdmin()
                    ElMessage.success("删除成功")
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "取消删除",
        })
    })
}

/**
 * 加载学院
 */
const loadCollage = () => {
    request.get(`/api/collage/find-collage`, {}).then(res => {
        collageOptions = res.data
    })
}
// 调用学院方法，获取后台数据
loadCollage()


/**
 * 加载房间
 */
const loadRoom = () => {
    request.get(`/api/room/find-room`, {}).then(res => {
        roomOptions = res.data
    })
}
// 调用房间方法，获取后台数据
loadRoom()

/**
 * 修改订单班管理员
 *
 * @param row 按行修改
 */
const editOrderClassAdmin = (row) => {
    orderClassAdminData.form.orderClassAdminNo = row.orderClassAdminNo
    orderClassAdminData.form.orderClassAdminName = row.orderClassAdminName
    orderClassAdminData.form.orderClassAdminRoomNo = row.orderClassAdminRoomNo
    orderClassAdminData.form.orderClassAdminRoomName = row.orderClassAdminRoomName
    orderClassAdminData.form.orderClassAdminCollageNo = row.orderClassAdminCollageNo
    orderClassAdminData.form.orderClassAdminCollageName = row.orderClassAdminCollageName
    orderClassAdminData.formVisible = true
}

/**
 * 提交修改的订单班管理员
 */
const submitEditOrderClassAdmin = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        orderClassAdminData.form.orderClassAdminUpdateMan = account.accountNo
        request.put(`/api/teacher/update-teacher`, orderClassAdminData.form).then(res => {
            if (res.code === "200") {
                // 重新获取数据
                loadOrderClassAdmin()
                // 关闭弹窗
                orderClassAdminData.formVisible = false
                ElMessage.success("编辑成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 */
const uploadSuccess = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        console.log("上传成功");
        ElMessage.success("上传成功")
        // 重新获取数据
        loadOrderClassAdmin()
    }
}
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="orderClassAdminData.orderClassAdminName"
                      placeholder="请输入姓名查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadOrderClassAdmin" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-upload class="upload-demo"
                           action="http://localhost:9090/api/system/upload-order-class-admin-excel"
                           accept=".xlsx"
                           :show-file-list="false"
                           :on-success="uploadSuccess">
                    <el-button type="primary" v-if="account.accountRoleName === 'system-admin'">导入Excel</el-button>
                </el-upload>
                <el-button type="primary" @click="uploadSuccess" v-if="account.accountRoleName === 'visitor-admin'">
                    导入Excel
                </el-button>
                <div class="el-upload__tip">
                    仅允许上传一个文件，仅限xlsx格式
                </div>
                <el-table :data="orderClassAdminData.tableData" style="width: 100%">
                    <el-table-column prop="orderClassAdminNo" label="工号" width="70px"/>
                    <el-table-column prop="orderClassAdminName" label="姓名" width="80px"/>
                    <el-table-column prop="orderClassAdminAge" label="年龄" width="60px"/>
                    <el-table-column prop="orderClassAdminSex" label="性别" width="60px"/>
                    <el-table-column prop="orderClassAdminCollageName" label="学院"/>
                    <el-table-column prop="orderClassAdminRoomName" label="办公室"/>
                    <el-table-column prop="orderClassAdminPhone" label="手机号"/>
                    <el-table-column prop="orderClassAdminEmail" label="电子邮箱"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="editOrderClassAdmin(scope.row)" type="primary" size="small" plain>编辑
                            </el-button>
                            <el-button @click="deleteOrderClassAdmin(scope.row.orderClassAdminNo)" type="danger"
                                       size="small"
                                       plain>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="orderClassAdminData.pageNum"
                           v-model:page-size="orderClassAdminData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="orderClassAdminData.total"/>
        </div>

        <el-dialog v-model="orderClassAdminData.formVisible" :close-on-click-modal="false" title="订单班管理员信息">
            <el-form :model="orderClassAdminData.form" label-width="100px" label-position="right"
                     style="padding-right: 30px;">
                <el-form-item label="工号">
                    <el-input placeholder="未填写" v-model="orderClassAdminData.form.orderClassAdminNo"
                              autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="未填写" v-model="orderClassAdminData.form.orderClassAdminName"
                              autocomplete="off" disabled></el-input>
                </el-form-item>
                <div class="block" style="margin-bottom: 20px;margin-left: 45px">
                    <el-select
                            v-model="orderClassAdminData.form.orderClassAdminCollageNo"
                            class="m-2"
                            placeholder="请选择学院"
                            style="width: 525px; margin-bottom: 20px;"
                    >
                        <el-option
                                v-for="item in collageOptions"
                                :key="item.collageNo"
                                :label="item.collageName"
                                :value="item.collageNo"
                        />
                    </el-select>
                    <el-select
                            v-model="orderClassAdminData.form.orderClassAdminRoomNo"
                            class="m-2"
                            placeholder="请选择办公室"
                            style="width: 525px;"
                    >
                        <el-option
                                v-for="item in roomOptions"
                                :key="item.roomNo"
                                :label="item.roomName"
                                :value="item.roomNo"
                        />
                    </el-select>
                </div>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="orderClassAdminData.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEditOrderClassAdmin">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>